//登录
(function () {
	var login = document.querySelector('.login'),
		loginBox = document.querySelector('#loginBox'),
		wrap = document.querySelector('#loginBox .wrap'),
		closeBtn = document.querySelector('#loginBox .close');

	login.onclick = () => loginBox.classList.add('show');   //点击登录出弹窗
	loginBox.onclick = closeBtn.onclick = () => loginBox.classList.remove('show');
	wrap.onclick = ev => ev.stopPropagation();  //阻止事件传递
})();


//适龄提示
(function () {
	var tip = document.querySelector('#banner .tip'),
		yearBox = document.querySelector('#yearBox'),
		wrap = document.querySelector('#yearBox .wrap'),
		closeBtn = document.querySelector('#yearBox .close');

	tip.onclick = () => {
		yearBox.classList.add('show');
		//添加滚动条
		scrollBar('#yearBox');
	};

	yearBox.onclick = closeBtn.onclick = () => yearBox.classList.remove('show');
	wrap.onclick = ev => ev.stopPropagation();  //阻止事件传递
})();


//banner轮播
(function () {
	//https://ossweb-img.qq.com/images/clientpop/idata_ad/idata_ad_16476.js		轮播图接口
	//https://ossweb-img.qq.com/images/clientpop/idata_ad/idata_ad_16535.js		四个广告小图接口

	// console.log(gAds16476);
	var imgData = Object.values(gAds16476.common);
	var carouselInner = document.querySelector('#banner .carouselInner');
	var li = '';

	imgData.forEach(img => li += `<li><a href="${img.adUrl}" target="_blank"><img src="http:${img.imgUrl}" alt=""></a></li>`);

	carouselInner.innerHTML = li;
	carousel(document.querySelector('#banner .carousel'));


	//四张广告小图
	var bottom = document.querySelector('#banner .bottom');
	var imgData = Object.values(gAds16535.common);
	var a = '';

	imgData.forEach(img => a += `<a href="${img.adUrl}" target="_blank"><img src="http:${img.imgUrl}" alt=""></a>`);
	bottom.innerHTML = a;
})();


//新闻列表
(function () {
	tab(document.querySelector('#banner .news'));

	//https://ossweb-img.qq.com/images/js/fillnewsgicp/
	var chanelID = [3996, 4000, 4001, 4003, 4467];  //这是频道的id
	var chanelName = ['最新', '新闻', '公告', '活动', '赛事'];  //这是频道的名字

	var tabContents = document.querySelectorAll('#banner .tabContent');
	for (let i = 0; i < tabContents.length; i++) {
		fillNews.list({
			wrap: tabContents[i],    //填充的容器
			gameID: 182, //游戏对应的id
			newsType: 'news',
			type: "iTarget", //数据查找的依据
			id: chanelID[i], //频道id
			tpl: function (json, index) {   //json:对应的数据，index：索引
				if (index == 0) {
					return `<li><a href="{url}" target="_blank">{sTitle}</a></li>`;
				}
				return `<li><span>[${chanelName[i]}]</span><a href="{url}" target="_blank">{sTitle}</a><i>{sIdxTimeShort}</i></li>`;
			},
			pageSize: 6, //每页显示的列表数量
			source: 'web_pc',
			detailURL: 'https://gp.qq.com/gicp/news/684/{id}.html',  //文章的链接
			noFadeIn: true   //是否有淡入淡出的效果
		});
	}
})();


//精英爆料
(function () {
	//选项卡
	tab(document.querySelector('#section2 .left'));

	//https://gp.qq.com/zlkdatasys///data_zlk_gwsybl.json?callback=xbbblcallback&_=1629011912154
	//请求数据
	$.ajax({
		url: 'https://gp.qq.com/zlkdatasys///data_zlk_gwsybl.json',
		dataType: 'jsonp',
		jsonpCallback: 'xbbblcallback',
		success: function (res) {
			// console.log(res);

			/*
				res.bldtzh_94   新地图的数据 
				res.blqxzh_17   新武器/皮肤的数据 
				res.blwfz_cf    新玩法/模式的数据 
				res.blzjzh_4c   新载具的数据 
			 */

			newMode(res.blwfz_cf);
			newArms(res.blqxzh_17);
			newMap(res.bldtzh_94);
			newVehicle(res.blzjzh_4c);
		}
	});

	function newMode(data) {    //新玩法/模式
		// console.log(data);
		var ul = document.querySelector('#section2 .mode ul');
		var li = '';

		data.forEach(img => li += `<li><img src="http:${img.blwft_7e}" alt=""></li>`);

		ul.innerHTML = li;

		carousel(document.querySelector('#section2 .carousel'));
	}

	function newArms(data) {    //新武器/皮肤
		//console.log(data);

		renderTop();    	//渲染小图以外的数据
		renderSmallImg();	//渲染小图

		function renderTop(i = 0) {  //渲染上面的内容，根据参数（索引值）进行渲染
			//文本
			var text = document.querySelector('.arms .text');
			text.innerHTML = `
				<h4>${data[i].blqxm_ee}</h4>
				<p class="name">
					<span>${data[i].blqxlm_08}</span>
					<span>口径：${data[i].kj_14}</span>
				</p>
				<p class="intro">${data[i].blqjswa_78}</p>`;

			//配件
			var parts = document.querySelector('.arms .parts');
			var partDom = '';
			data[i].blqxpjzh_b2.forEach(part => {
				partDom += `<li>
					<img src="http:${part.blqpjt_8d}" alt="">
					<p>${part.pjm_40}</p>
				</li>`;
			});
			parts.innerHTML = partDom;

			//大图
			var bigArms = document.querySelector('.arms .bigArms');
			bigArms.innerHTML = `<img src="http:${data[i].blqdt_98}" alt="">`;

			//皮肤
			var skinUl = document.querySelector('.arms .skin ul');
			var skinLi = '';
			data[i].qxpfzh_79.forEach(skin => {
				skinLi += `<li>
					<img src="http:${skin.blqpf_bc}" alt="">
					<span>${skin.qxpft2_ac}</span>
				</li>`;
			});
			skinUl.innerHTML = skinLi;
			skinChange(i);  //切换皮肤，参数为当前的索引
		}

		function skinChange(i) { //切换皮肤
			var skin = document.querySelector('.arms .skin'),
				skinBtn = document.querySelector('.arms .skin .btn'),
				skinLis = document.querySelectorAll('.arms .skin ul li'),
				bigArms = document.querySelector('.arms .bigArms');
			var ln = 0;
			skin.b = true;	//给自己身上添加一条属性，用于决定是否添加class。这里也是为了在下一个函数里用到这条属性

			skinBtn.onclick = () => {
				if (skin.b) {
					skin.classList.add('active');
				} else {
					skin.classList.remove('active');
				}
				skin.b = !skin.b;

				//皮肤小图点击
				for (let j = 0; j < skinLis.length; j++) {
					skinLis[j].onclick = function () {
						skinLis[ln].className = '';
						this.className = 'active';
						ln = j;

						bigArms.innerHTML = `<img src="http:${data[i].qxpfzh_79[j].blqpf_bc}" alt="">`;

						skin.b = true;
						skin.classList.remove('active');
					};
				}
			};
		}

		function renderSmallImg() {	//渲染小图
			var ul = document.querySelector('.arms .move ul');
			var li = '';
			var ln = 0;

			for (let i = 0; i < data.length; i++) {
				li += `<li class="${i ? '' : 'active'}">
					<span><img src="http:${data[i].blqdt_98}" alt=""></span>
					<p>${data[i].blqxm_ee}</p>
				</li>`;
			}
			ul.innerHTML = li;
			drag();

			//小图点击功能
			var lis = ul.children;
			var skin = document.querySelector('.arms .skin');
			for (let i = 0; i < lis.length; i++) {
				lis[i].onclick = function () {
					if (ul.move) {
						return;	//这个条件成立说明是拖拽事件，拖拽的话后面的代码就不需要执行
					}

					lis[ln].className = '';
					this.className = 'active';
					ln = i;

					skin.b = true;
					skin.classList.remove('active');

					renderTop(i);	//渲染上面的内容
				};
			}
		}

		function drag() {	//小图拖拽系列功能
			var wrap = document.querySelector('.arms .move'),
				ul = document.querySelector('.arms .move ul'),
				lis = ul.children;

			var statX = 0,	//鼠标按下时的坐标
				startL = 0,	//鼠标按下时ul的位置
				l = 0,		//ul要走到的位置 
				liWidth = 0,	//一个li的宽度
				maxWidth = 0,	//ul能走的最大距离
				cn = 0,		//当前选中的li的索引
				canClick = true;	//用来决定用户是否可以进行下一次点击

			ul.style.transform = 'translateX(0)';

			wrap.onmousedown = ev => {
				statX = ev.clientX;
				startL = parseInt(ul.style.transform.split('(')[1]);
				liWidth = lis[0].offsetWidth;
				maxWidth = wrap.offsetWidth - ul.offsetWidth;	//这里取到的是个负值 -172
				ul.move = false;	//这条属性用来决定用户是否拖拽也

				document.onmousemove = ev => {
					ul.move = true;	//拖拽了

					l = ev.clientX - statX + startL;

					//拉力
					if (l > 0) {	//左边到头，添加拉力
						l *= 0.3;
					}
					if (l < maxWidth) {	//右边到头，添加拉力
						//l *= 0.3;
						//var dis=-(l-maxWidth)
						var dis = maxWidth - l;		//超出距离
						l = maxWidth - dis * 0.3;
					}

					/*
						0 	1 		2	 	3 。。。
						0 	0.3 	0.6 	0.9


						10
						3
					 */

					ul.style.transition = null;
					ul.style.transform = 'translateX(' + l + 'px)';
				};

				document.onmouseup = ev => {
					//回弹
					cn = parseInt(-l / liWidth);	//拖拽到头的li对应的索引
					if (cn < 0) {	//如果往右边拖的太很了，那l的值就成正值了，cn就会变成负值
						cn = 0;
					}

					var center = lis[cn].offsetLeft + lis[cn].offsetWidth / 2;	//拖拽到了当前li的中心点位置
					if (-l > center) {	//这个条件成立说明拖拽已经过了li的中心点了，要走到下一个li的原点
						/* cn++;
						l = -lis[cn].offsetLeft; */

						l = -lis[++cn].offsetLeft;

					} else {	//没有过中心点，走到当前li的原点
						l = -lis[cn].offsetLeft;	//左边没有判断是否到头，困为第一个li没有过中心点就要回到它的原点，而它的原点就是ul的原点
					}

					//右边是否到头，到头了需要走到终点
					if (l < maxWidth) {
						l = maxWidth;
					}

					ul.style.transition = '.3s';
					ul.style.transform = 'translateX(' + l + 'px)';

					document.onmousemove = null;
				};

				ev.preventDefault();
			};

			//处理按钮的状态
			var btns = document.querySelectorAll('.arms .smallArms .btn');
			ul.addEventListener('transitionend', () => {
				maxWidth = wrap.offsetWidth - ul.offsetWidth;	//由于maxWidth在down下的时候才有值，这里如果没有发生down事件，它就没有值。所以这里需要重新获取一下

				if (l >= 0) {	//左边到头了
					btns[0].classList.add('disable');
				} else {
					btns[0].classList.remove('disable');
					canClick = true;	//这个时候可以允许用户下一次点击了
				}

				//console.log(l , maxWidth);
				if (l <= maxWidth) {	//右边到头了
					btns[1].classList.add('disable');
				} else {
					btns[1].classList.remove('disable');
					canClick = true;
				}
			});

			//按钮点击
			function handleClick(obj, n) {	//obj：按钮本身 n：加或者减
				if (obj.classList.contains('disable') || !canClick) {
					return;
				}
				canClick = false;

				cn += n;

				l = -cn * lis[0].offsetWidth;

				ul.style.transition = '.3s';
				ul.style.transform = 'translateX(' + l + 'px)';
			}
			btns[0].onclick = () => {
				handleClick(btns[0], -1);	//左箭头
			};
			btns[1].onclick = () => {
				handleClick(btns[1], 1);	//右箭头
			};
		}
	}

	function newMap(data) {		//新地图
		//console.log(data);
		var bigImg = document.querySelector('#section2 .newMap div'),
			smallImg = document.querySelector('#section2 .newMap ul');

		var img = '',
			li = '';

		data.forEach((map, index) => {
			img += `<img class="${index ? '' : 'active'}" src="http:${map.bldt_3c}" alt="">`;
			li += `<li class="${index ? '' : 'active'}">
				<img src="http:${map.bldt_3c}" alt="">
				<p>${map.bldtm_e1}</p>
			</li>`;
		});

		bigImg.innerHTML = img;
		smallImg.innerHTML = li;

		//tab
		var lis = smallImg.children,
			imgs = bigImg.children;

		var ln = 0;
		for (let i = 0; i < lis.length; i++) {
			lis[i].onclick = () => {
				lis[ln].className = imgs[ln].className = '';
				lis[i].className = imgs[i].className = 'active';
				ln = i;
			};
		}
	}

	function newVehicle(data) {	//新载具
		//console.log(data);
		var ul = document.querySelector('#section2 .vehicle ul');
		var li = '';
		data.forEach(vehicle => li += `<li><img src="http:${vehicle.blzjt_1b}" alt=""></li>`);

		ul.innerHTML = li;
	}


})();


//活动中心
(function () {
	//https://gp.qq.com/zlkdatasys/data_zlk_gwhdrl.json?callback=hdrlcallback&_=1629167880723
	//请求数据
	$.ajax({
		url: 'https://gp.qq.com/zlkdatasys/data_zlk_gwhdrl.json',
		dataType: 'jsonp',
		jsonpCallback: 'hdrlcallback',
		success: function (res) {
			//console.log(res);
			calendar(res.hdrlz_27);
			/*
				数据说明
					1、hdrlz_27						今年已经过的月份
					2、hdrlz_27.yq_1e 				月份数字
					3、hdrlz_27.hdrl_84 			当前月份里所有的活动（数组），索引并不是日期
					4、hdrlz_27.hdrl_84[0].hdlx_67 		是否重磅
					5、hdrlz_27.hdrl_84[0].hdmz_8b 		活动名称
					6、hdrlz_27.hdrl_84[0].hdrlsj_6d 	活动时间
					7、hdrlz_27.hdrl_84[0].nf_c8 		活动年份
					8、hdrlz_27.hdrl_84[0].rljlz_21 	活动奖励（数组）
					9、hdrlz_27.hdrl_84[0].rqz_00	 	此项活动在当前月里的日期列表（数组）
				想要的数据结构
					{
						20210801:[
							{},		//hdrl_84[i]
							{},
							...
						],
						20210802:[
							{},
							{},
							...
						],
						...
					}
			 */
		}
	});

	//选项卡
	tab(document.querySelector('#section2 .right'));

	//活动日历
	function calendar(data) {
		// console.log(data);
		var btns = document.querySelectorAll('.calendar .day .btn');

		function formatData(list) {	//格式化数据
			var result = {};

			list.forEach(monthData => {
				var month = monthData.yq_1e;	//获取活动所在的月份
				month = month < 10 ? '0' + month : ''+ month;	//补0

				monthData.hdrl_84.forEach(activity => {	//遍历月份里的活动数据
					var year = activity.nf_c8;	//获取活动所在的年份
					activity.rqz_00.forEach(dayData => {	//遍历活动所在的日期（日）
						var day = dayData.rq_af;	//获取活动所在的日期
						day = day < 10 ? '0' + day : day;	//补0

						var date = year + month + day;	//活动所对应的年月日（当作key）
						if (!result[date]) {	//这个条件成立说明这个key还没有出现在对象里
							result[date] = [];
						}
						result[date].push(activity);
					});
				});
			});

			return result;
		}
		var activityData = formatData(data);	//格式化之后的数据
		//console.log(activityData);

		function addDate(date, n) {	//加减日期（日期对象，天数）
			date.setDate(date.getDate() + n);
			return date;
		}
		function formatDate(date) {	//格式化日期
			var year = date.getFullYear();	//获取日期对象里的年份

			var month = date.getMonth() + 1;	//获取日期对象里的月份
			month = month < 10 ? '0' + month :''+ month;	//补0

			var day = date.getDate();	//获取日期对象里的日
			day = day < 10 ? '0' + day : day;	//补0

			return year + month + day;
		}
		// console.log(formatDate(new Date(2021, 7, 1)));	//20210801
		// console.log(activityData[formatDate(new Date(2021, 7, 1))]);

		var monday = '';	//当前周的周一，它用来切换上下周，以及渲染年月
		function renderWeek(date) {	//渲染一周的日期
			var dateWrap = document.querySelector('.calendar .date'),
				ul = document.querySelector('.calendar .day ul');

			var week = date.getDay() - 1;	//这周已经过的天数，拿的这个东西来取周的日期
			if(week==-1){   //如果当前的星期是周日，week就是负值
               			    week=6;
            			}
			var newMonday = addDate(date, -week);	//以今天的星期数往前找到这个周的周一，这个周一是用来渲染星期的
			monday = new Date(newMonday);

			//更新年月
			var month = monday.getMonth() + 1;
			month = month < 10 ? '0' + month : month;	//补0
			dateWrap.innerHTML = monday.getFullYear() + '年' + (month) + '月';

			//渲染星期
			var li = '';
			for (var i = 0; i < 7; i++) {
				var day = i ? addDate(newMonday, 1) : newMonday;	//0的时候要的是周一的数据，从1开始要的是日期不断加1的数据

				var cl = '';	//class
				if (activityData[formatDate(day)]) {
					//这个条件成立说明这天的日期变成年月日的形式后，做为key在格式化后的数据里找到了，说明这天有活动
					cl = 'activity';
				}

				if (formatDate(new Date()) == formatDate(day)) {
					//这个条件成立说明这个日期是今天
					cl += ' active';
				}

				li += `<li class="${cl}" data-date="${formatDate(newMonday)}">${day.getDate()}</li>`;
			}
			ul.innerHTML = li;
			handleClick();	//给li添加事件
		}
		renderWeek(new Date());

		btns[0].onclick = () => renderWeek(addDate(monday, -7));	//上一周
		btns[1].onclick = () => renderWeek(addDate(monday, 7));		//下一周

		function handleClick() {	//给日期添加事件
			var lis = document.querySelectorAll('.calendar .day li'),
				last = document.querySelector('.calendar .day li.active');

			lis.forEach(li => li.onclick = () => {
				last && last.classList.remove('active');
				li.classList.add('active');

				last = li;

				renderActivity(activityData[li.dataset.date]);
			});
		}

		renderActivity(activityData[formatDate(new Date())]);	//默认以今天的日期变成年月日的形式做为key，去格式化后的数据对象里取到对应的数据，并渲染
		function renderActivity(data) {
			// console.log(data);
			var scroll = document.querySelector('.calendar .scroll'),
				content = document.querySelector('.calendar .scroll .scrollContent');
			var award = '';	//award对应的结构

			//如果没有数据
			if (!data) {	//此日期下没有数据
				scroll.classList.add('noActivity');
				scrollBar('.calendar');	//滚动条重新初始化一下

				return;
			}

			scroll.classList.remove('noActivity');	//如果从没有数据的日期切换到有数据的日期，就需要把class去掉

			data.forEach(act => {
				//活动奖励结构
				var li = '';
				act.rljlz_21.length && act.rljlz_21.forEach(item => {
					li += `<li>
						<span><img src="http:${item.jlt_05}" alt=""></span>
						<span>${item.jlmz_68}</span>
					</li>`;
				});

				//重磅
				var big = act.hdlx_67 && `<div class="zb"><span>重磅</span></div>`;

				//活动结构
				award += `<div class="award">
					<h4>${act.hdmz_8b}</h4>
					<p>活动时间：<span>${act.hdrlsj_6d}</span></p>
					<p>活动奖励：</p>
					<ul>
						${li}
					</ul>
					${big}
				</div>`;
			});

			content.innerHTML = award;
			scrollBar('.calendar');	//滚动条
		}
	}

	//福利资讯
	function gift() {
		var ul = document.querySelector('#section2 .info ul'),
			btn = document.querySelector('#section2 .info .btn');

		fillNews.list({
			wrap: ul,    //填充的容器
			gameID: 182, //游戏对应的id
			newsType: 'news',
			type: "iTarget", //数据查找的依据
			id: 4003, //频道id
			tpl: `<li><a href="{url}" target="_blank">{sTitle}</a><span>{sIdxTimeShort}</span></li>`,
			pageSize: 6, //每页显示的列表数量
			source: 'web_pc',
			detailURL: 'https://gp.qq.com/gicp/news/684/{id}.html',  //文章的链接
			noFadeIn: true,   //是否有淡入淡出的效果
			pager: {
				wrap: btn,
				type: 'laypage',
				groups: 0,
			}
		});
	}
	gift();
})();


//视频中心
(function () {
	//选项卡
	tab(document.querySelector('#section3 .movie'));

	var chanelID = [4007, 4009, 4008, 4466];  //这是频道的id
	//var chanelName = ['官方视频', '人气主播', '进阶教学', '赛事专栏'];  //这是频道的名字

	var tabContents = document.querySelectorAll('#section3 .movie .tabContent');
	for (let i = 0; i < tabContents.length; i++) {
		fillNews.list({
			wrap: tabContents[i],    //填充的容器
			gameID: 182, //游戏对应的id
			newsType: 'video',
			type: "iTarget", //数据查找的依据
			id: chanelID[i], //频道id
			tpl: `<li>
				<a href="{url}" target="_blank"><img src="https:{sIMG}" alt=""></a>
				<a href="{url}" target="_blank">{sTitle}</a>
			</li>`,
			pageSize: 6, //每页显示的列表数量
			source: 'web_pc',
			detailURL: 'https://gp.qq.com/gicp/news/687/{id}.html',  //文章的链接
			noFadeIn: true   //是否有淡入淡出的效果
		});
	}
})();


//热门排行
(function () {
	var ol = document.querySelector('#section3 .rank ol'),
		lis = document.querySelectorAll('#section3 .rank ul li');

	var rank = ['dpvlist', 'wpvlist', 'mpvlist'];	//排行榜的分类（日，周，月）
	var newsList = fillNews.list({
		wrap: ol,    //填充的容器
		gameID: 182, //游戏对应的id
		newsType: 'video',
		type: "iTarget", //数据查找的依据
		id: 3998, //频道id
		rank: rank[0],
		tpl: function (json, index) {   //json:对应的数据，index：索引
			if (index === 0) {
				return `<li class="first">
					<a href="{url}" target="_blank"><img src="https:{sIMG}" alt=""></a>
					<div>
						<a href="{url}" target="_blank">{sTitle}</a>
						<p><span>{sAuthor}</span><span>{iTotalPlay}</span></p>
					</div>
				</li>`;
			}
			return `<li><span><a href="{url}" target="_blank">{sTitle}</a></span><i>{iTotalPlay}</i></li>`;
		},
		pageSize: 6, //每页显示的列表数量
		source: 'web_pc',
		detailURL: 'https://gp.qq.com/web201908/detail_video.html',  //文章的链接
		noFadeIn: true   //是否有淡入淡出的效果
	});

	//选项卡
	var last = lis[0];
	lis.forEach((li, index) => {
		li.onclick = function () {
			last.className = '';
			this.className = 'active';
			last = this;

			//更新排行
			newsList.update({
				rank: rank[index],
			});
		};
	});
})();


//攻略中心
(function () {
	//选项卡
	tab(document.querySelector('#section4 .left'));

	var chanelID = [3997, 4006, 4541];  //这是频道的id，后面两个频道的id是不正确的

	var tabContents = document.querySelectorAll('#section4 .left .tabContent');
	for (let i = 0; i < tabContents.length; i++) {
		fillNews.list({
			wrap: tabContents[i],    //填充的容器
			gameID: 182, //游戏对应的id
			newsType: 'news',
			type: "iTarget", //数据查找的依据
			id: chanelID[i], //频道id
			tpl: `<li>
					<a href="{url}" target="_blank"><img src="https:{sIMG}" alt=""></a>
					<a href="{url}" target="_blank">{sTitle}</a>
					<p>
						<span>{iTotalPlay}</span>
						<span>{sIdxTimeShort}</span>
					</p>
				</li>`,
			pageSize: 4, //每页显示的列表数量
			source: 'web_pc',
			detailURL: 'https://gp.qq.com/gicp/news/684/{id}.html',  //文章的链接
			noFadeIn: true   //是否有淡入淡出的效果
		});
	}
})();


//精品栏目
(function () {
	//选项卡
	tab(document.querySelector('#section4 .right'));

	var chanelID = [4402, 5053, 5039, 5037];  //这是频道的id

	var tabContents = document.querySelectorAll('#section4 .right .tabContent');
	var type = '';
	var shiurl = '';

	for (let i = 0; i < tabContents.length; i++) {
		if (i === 0) {
			type = 'news';
			shiurl = 'https://gp.qq.com/gicp/news/687/{id}.html';
		} else {
			type = 'video';
			shiurl = 'https://gp.qq.com/gicp/video/687/{id}.html';
		}

		fillNews.list({
			wrap: tabContents[i],    //填充的容器
			gameID: 182, //游戏对应的id
			newsType: type,
			type: "iTarget", //数据查找的依据
			id: chanelID[i], //频道id
			tpl: `<li>
					<a href="{url}" target="_blank"><img src="https:{sIMG}" alt=""></a>
					<a href="{url}" target="_blank">{sTitle}</a>
					<p>
						<span>{iTotalPlay}</span>
						<span>{sIdxTimeShort}</span>
					</p>
				</li>`,
			pageSize: 6, //每页显示的列表数量
			source: 'web_pc',
			detailURL: shiurl,  //文章的链接
			noFadeIn: true   //是否有淡入淡出的效果
		});
	}
})();


//和平人气主播
(function () {
	var ul = document.querySelectorAll('#section5 .photo')[0];
	fillNews.list({
		wrap: ul,    //填充的容器
		gameID: 182, //游戏对应的id
		newsType: 'news',
		type: "iTarget", //数据查找的依据
		id: 4910, //频道id
		tpl: `<li><a href="{url}" target="_blank"><img src="https:{sIMG}" alt="">{sTitle}</a></li>`,
		pageSize: 6, //每页显示的列表数量
		source: 'web_pc',
		detailURL: 'https://gp.qq.com/gicp/news/684/{id}.html',  //文章的链接
		noFadeIn: true   //是否有淡入淡出的效果
	});
})();


//游戏特色
(function () {
	//请求数据
	$.ajax({
		url: 'https://gp.qq.com/zlkdatasys///data_zlk_gwsykvtst.json',
		dataType: 'jsonp',
		jsonpCallback: 'gwsycallback',
		success: function (res) {
			//console.log(res);
			/*
				gwsykv_18	banner图
				mdtst_88	游戏特色里图片（小尺寸） 
				tst_db		游戏特色里图片（大尺寸） 
			 */
			render(res);
		}
	});

	function render(data) {
		//游戏特色
		var ul = document.querySelector('#section6 ul');
		var li = '';

		data.tst_db.forEach(img => li += `<li><img src="https:${img.pcdtst_c0}" alt="${img.tstms_20}"></li>`);
		ul.innerHTML = li;

		carousel(document.querySelector('#section6 .carousel'));

		//banner图
		var bg1 = document.querySelector('#bg1'),
			banner = document.querySelector('#banner');

		bg1.style.backgroundImage = `url(https:${data.gwsykv_18[0].gwsbdt_12})`;
		banner.style.backgroundImage = `url(https:${data.gwsykv_18[0].gwxbdt_37})`;
	}
})();


//侧边导航
(function () {
	var sideNav = document.querySelector('#sideNav'),
		toggleBtn = document.querySelector('#sideNav .toggleBtn');

	var b = true;

	//收起展开
	toggleBtn.onclick = function () {
		if (b) {
			this.parentNode.classList.add('hidden');
		} else {
			this.parentNode.classList.remove('hidden');
		}
		b = !b;
	};

	//显示隐藏
	function toggle() {
		if (window.pageYOffset > 300) {
			//如果滚动条的距离超过了300，就让它显示
			sideNav.classList.remove('disNone');
		} else {
			sideNav.classList.add('disNone');
		}
	}
	toggle();

	window.addEventListener('scroll', toggle);	//滚动条滚动事件
})();

